<style>

	#vm { display: flex; flex-flow: column nowrap; align-items: center;}

	.lines { width: 100%; display: flex; justify-content: flex-start; align-items: center; }
	.lines label:nth-child(n>1) { margin-left: 20px; }
	input, select {height: 28px; margin: 0; padding: 0;}
	#pick_target { width: 360px; }
	#pick_days { width: 180px; }
	#table_target_type { width: 180px; }
	.chart_conditions button { width: 60px; margin: 0 10px; }
	
	#chart { position: relative; width: 100%; height: 400px; }
	#chart img { width: 200px; height: 200px; margin:auto; }
	
	.table_conditions button { width: 60px; margin: 0 10px; }
	
	#kktable { font-size: 8px;}
	#kktable th, #kktable td { padding: 0; }
	#kktable select, #kktable input { width: 40px; }
</style>
<div id="container">

	<div id="vm">
		<h4>预约及体验课预约情况统计图</h4>
		<div class="chart_conditions">
			<div class="lines">
				<label>统计对像：
				<input id="pick_target" v-model="target_name" list="target_type_list" @click="clearTargetName"  ></label>
				<datalist id="target_type_list">
					<option v-for="val in target_type_lists" :value="val"></option>
				</datalist>
				<button @click="showChart">查询</button>
			</div>
		</div>
		<div id="chart"><!-- <img src="img/spinner.gif" /> --></div>

		<hr>
		<div class="whitespace"></div>
		<h4>预约及体验课预约情况统计表</h4>
		<div class="table_conditions">
			<div class="lines">
				<label>范围：</label>
				<input v-model="target_name_t" disabled="">

				<span v-if="!lookinto"  ><!-- 当下钻时隐藏 -->
					<label>日期：</label>
					<input type="date" v-model="table_date" id="pick_days">
					<label>粒度：</label>
					<select v-model="table_target_type" id="table_target_type"> 
						<option value="城市">城市</option>
						<option value="门店">门店</option>
					</select>
				
					<button @click="drawTable">查询</button>
				</span>
				<button v-if="lookinto" @click="returnTable">后退</button>
			</div>
		</div>
		
		<v-table style="width:80%" :height="400" is-horizontal-resize :is-loading="isLoading" :columns="columns" :table-data="tableData" row-hover-color="#fff" :row-click="rowClick" :multiple-sort="multipleSort" sort-always  @sort-change="sortChange"></v-table>
	</div>
	<div style="height: 40px;">
	</div>
</div>	

<script>

	// 显示图
	var showChart = function(){
	
		var data = {
			do: 'ty_classes',
			target: vm.target_name
		};
		console.log(data)
		$.get(dataDomain + "gyms.php", data, function(r){
			console.log(r);
			let pre = [],
				pre_r = [],
				ty_pre = [],
				ty_pre_r = [],
				xaxisdata = [];
			for(var i in r){
				xaxisdata.push(r[i].days);
				pre.push(Number(r[i].pre));
				ty_pre.push(Number(r[i].ty_pre));
				if(i >= 30){
					pre_r.push(Number(r[i-30].pre));
					ty_pre_r.push(Number(r[i-30].ty_pre));
				}else{
					pre_r.push(0);
					ty_pre_r.push(0);
				}
	
			}
			
			var opt = rd.chart_option.createNew();
			opt.add_series([{name: "本月预约", type: "line"}, {name: "本月体验课预约", type: "bar"}, 
				{name: "上月预约", type: "line"}, {name: "上月体验课预约", type: "bar"}]);
			opt.option.xAxis[0].name = "日期";
			opt.option.yAxis[0].name = "人次";
			opt.option.dataZoom[0].startValue = i - 10;
			opt.date_format();
			opt.option.xAxis[0].data = xaxisdata;
			opt.option.series[0].data = pre;
			opt.option.series[1].data = ty_pre;
			opt.option.series[2].data = pre_r;
			opt.option.series[3].data = ty_pre_r;		

			var chart = echarts.init(document.getElementById("chart"));
			chart.setOption(opt.option);		
		}, 'json')
	}
	
	// 定义table
	var drawTable = function(){
		// 加载表
		let regs = {
			do: 'ty_classes_table',
			day: vm.table_date,
			target: vm.target_name_t ? vm.target_name_t : vm.target_name,
			count_type: vm.table_target_type_t ? vm.table_target_type_t : vm.table_target_type
		}
		console.log(regs)
		vm.isLoading = true;
		$.get(dataDomain + "gyms.php", regs, function(r){
			console.log(r);
			vm.isLoading = false;
			vm.tableData = r;
			
		}, 'json')
	
	}
	
	
	var vm = new Vue({
		el: "#vm",
		data: {
			target_type: 'region',							// 统计对像范围值 
			target_type_lists: ["全国"],						// 统计对像范围下拉列表项
			target_name: '全国',								// 统计对像范围实名
			table_date: rd.dateAdd(new Date(), -1), 		// 统计表日期
			table_target_type: '城市',						// 统计表对像值
			target_name_t: null,							// 统计表对像下钻后新范围值
			table_target_type_t: '',						// 统计表对像下钻后新值。 由city向name变化，或者由name向memo变化

			// table settings
			tableData: [],
			columns: [
				{field: "target", title: "城市", width: 100, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "day", title: "日期", width: 85, titleAlign: 'center', columnAlign:'center', orderBy:'',  isResize:true},
				{field: "pre", title: "预约总人数", width: 60, titleAlign: 'center', columnAlign:'center', orderBy:'', isResize:true},
				{field: "ty_pre", title: "预约体验课人数", width: 60, titleAlign: 'center', columnAlign:'center', orderBy:'', isResize:true},
				// {field: "ty_pre_classes", title: "体验课上课人数", width: 60, titleAlign: 'center', columnAlign:'center', orderBy:'', isResize:true},
			],
			lookinto: false,
			isLoading: true,
			multipleSort: false,

		},
		methods: {
			rowClick: function(rowIndex, rowData, columnInfo){ // 表下钻
				// console.log(rowData['target']);
				if(columnInfo.field != 'target' || vm.table_target_type_t == '明细') return;
				vm.target_name_t = rowData['target'];
				if (!vm.table_target_type_t) vm.table_target_type_t = vm.table_target_type;
				if (vm.table_target_type_t == '城市'){
					vm.table_target_type_t = '门店';
					vm.columns[0].title = '门店';
				}else if(vm.table_target_type_t == '门店'){
					vm.table_target_type_t = '明细'
					vm.columns[1].title = '时间';
				}
				vm.lookinto = true;
				drawTable()
			},
			returnTable: function(){
				vm.table_target_type_t = null;
				vm.target_name_t = vm.target_name;
				vm.columns[0].title = "城市";
				vm.columns[1].title = "日期";
				vm.lookinto = false;
				drawTable()
			},
			sortChange: function(e){
				for(let i in e){
					if(e[i]){
						vm.tableData.sort(function(a, b){
							let n = 0;
							if(!isNaN(a[i])){
								n = Number(b[i]) - Number(a[i])
							}else{
								n = a[i] < b[i] ? 1 : a[i] == b[i] ? 0 : -1;
							}
							if(e[i] == "asc"){
								n = -n;
							}
							return n;
						})
					}
				}
			},
			showChart: function(){
				this.target_name_t = this.target_name;
				this.lookinto = false;
				this.table_target_type_t = "";
				showChart();
				drawTable();
			},
			drawTable: function(){
				drawTable();
			},
			clearTargetName: function(){
				this.target_name = "";
			},
		},
		mounted(){
			var that = this;
			// 配置对像范围选择器下拉列表，分二级，先城市，后门店
			$.get(dataDomain + "curd.php", {table: "gym", do: "select", fields: "distinct city", conditions: JSON.stringify({status: 1})}, function(r){
		        console.log(r)
		        for(let i in r){
		        	that.target_type_lists.push(r[i].city);
		        }
		        $.get(dataDomain +　"curd.php", {table: "gym", do: "select", fields: "name", conditions: JSON.stringify({status: 1})}, function(r){
		        	for(let i in r){
		        		that.target_type_lists.push(r[i].name);
		        	}
		        }, 'json')
		    }, 'json')  
		    this.target_name_t = this.target_name;
		}
	})


</script>